<script setup lang="ts">
  import { ElMessage, UploadFile, UploadRawFile } from 'element-plus'
  import { CodeScanSetData } from '../../../types'
  import { PropType, ref, watch } from 'vue'
  import ImgPreviewModal from '@/components/ImgPreviewModal.vue'

  const props = defineProps({
    set: Object as PropType<CodeScanSetData>,
  })

  const emits = defineEmits<{
    (e: 'update', value: CodeScanSetData): void
    (e: 'imgUpdate', value: UploadRawFile): void
    (e: 'imgDel'): void
  }>()

  // 数据源
  const set = ref<CodeScanSetData | null>(null)

  // 通知父组件更新
  const onUpdate = () => {
    emits('update', { ...set.value })
  }

  // 图片更新事件
  const handleImageUpdate = (file: UploadFile) => {
    set.value.val = URL.createObjectURL(file.raw)
    emits('imgUpdate', file.raw)
    onUpdate()
  }

  // 按钮取消聚焦事件
  const btnCancelFocus = (e: Event) => {
    ;(e.target as HTMLButtonElement).blur()
  }

  // 图片预览弹窗标题
  const imagePreviewModalTitle = ref('')

  // 图片预览地址
  const imagePreviewUrl = ref('')

  // 图片预览弹窗状态
  const imagePreviewModalVisible = ref(false)

  // 图片预览事件
  const handlePreviewImage = (name: string, url: string) => {
    if (!url) {
      ElMessage({
        type: 'warning',
        message: '暂无图片可以预览',
      })
      return false
    }
    imagePreviewModalTitle.value = name
    imagePreviewUrl.value = url
    imagePreviewModalVisible.value = true
  }

  // 删除新增的图片
  const handleDeleteNewImage = () => {
    set.value.val = ''
    emits('imgDel')
  }

  watch(
    () => props.set,
    (value) => {
      set.value = { ...value }
    },
    { deep: true, immediate: true },
  )
</script>

<template>
  <div>
    <el-form v-if="set" label-width="70px" label-position="right">
      <el-form-item class="mt-10" label="标题">
        <el-input
          v-model.trim="set.name"
          maxlength="10"
          placeholder="请输入标题"
          @input="onUpdate"
        />
      </el-form-item>
      <el-form-item class="mt-10" label="标题位置">
        <el-radio-group v-model="set.align" @change="onUpdate">
          <el-radio :value="1">左对齐</el-radio>
          <el-radio :value="2">左右居中</el-radio>
          <el-radio :value="3">右对齐</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mt-10" label="显示状态">
        <div class="flex-center-5">
          <el-switch v-model="set.show" @change="onUpdate" />
          <span v-if="set.show">显示</span>
          <span v-else>隐藏</span>
        </div>
      </el-form-item>
      <el-form-item label="上传图片">
        <div class="add_picture_container">
          <el-image :src="set.val" style="width: 200px; height: 160px">
            <template #error>
              <div class="image-slot">
                <el-icon>
                  <Picture />
                </el-icon>
              </div>
            </template>
          </el-image>
          <div class="add_picture_btn_group">
            <el-upload :auto-upload="false" :show-file-list="false" :on-change="handleImageUpdate">
              <el-button
                class="upload_btn"
                style="width: 3.2vw"
                type="primary"
                @focus="btnCancelFocus"
                >上传
              </el-button>
            </el-upload>
            <el-button
              style="width: 3.2vw"
              @click="handlePreviewImage(set.name, set.val as string)"
              @focus="btnCancelFocus"
              >预览
            </el-button>
            <el-button
              plain
              style="width: 3.2vw; margin: 0"
              type="danger"
              @click="handleDeleteNewImage"
              @focus="btnCancelFocus"
              >删除
            </el-button>
          </div>
          <div class="add_picture_tip">
            上传格式为 .jpg 或 .png ，大小不超过300Kb的图片作为活动页面背景图
          </div>
        </div>
      </el-form-item>
    </el-form>
    <ImgPreviewModal
      v-model="imagePreviewModalVisible"
      :name="imagePreviewModalTitle"
      :url="imagePreviewUrl"
    />
  </div>
</template>

<style scoped lang="scss">
  .upload_btn {
    width: 2.8vw;
    background-color: $primaryColor;
    border-color: $primaryColor;

    &:hover {
      background-color: rgba($primaryColor, 0.8);
      border-color: rgba($primaryColor, 0.8);
    }
  }

  .mt-10 {
    margin-bottom: 10px;
  }

  .image-slot {
    background: #f5f7fa;
    color: #909399;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .flex-center-5 {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .add_picture_container {
    .add_picture_btn_group {
      display: flex;
      gap: 10px;
    }

    .add_picture_tip {
      font-size: 12px;
      color: #999;
      line-height: 20px;
    }
  }
</style>
